<script setup lang="ts">
  import {ref, onMounted} from "vue";
  import {get,del} from './api'
  import {ElMessage,ElMessageBox} from "element-plus";

  const searchVal = ref("")
  const data=ref([])
  let inway=ref(0)
  let title=ref("")
  const search=()=>{ }
  const load=async ()=>{
    const res= (await get(searchVal.value))
    data.value=res.data
  }
  onMounted(async ()=>{
    await load()
  })
  const add=()=>{
    inway.value=0
    title.value="新增书本"
    isShow.value=true
  }

  const info=ref({})
  const edit=(row:any)=>{
    inway.value=1
    title.value="编辑书本"
    info.value=row
    isShow.value=true
  }
  const dele=async (row:any)=>{
    ElMessageBox.confirm(`确定要删除${row.BookName}吗？`,'提示',{
      confirmButtonText:'确定',
      cancelButtonText:'取消',
      type:'warning'
    }).then(async ()=>{
      await del(row.Id).then(async ()=>{
        await load()
        ElMessage({
          type:'success',
          message:`删除成功`
        })
      })
    })
  }
  let isShow=ref(false)

  const closeAdd=async ()=>{
    isShow.value=false
    info.value={}
    await load()
  }

  const reset=async ()=>{
    searchVal.value=""
    await load()
  }

  import addt from './components/add.vue'
</script>

<template>
    <div class="main">
      <el-row>
        <el-col :span="12">
          <el-input v-model="searchVal" placeholder="请输入" class="input" @keyup.enter="search">
          </el-input>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" @click="load">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
          <el-button type="primary" @click="add">新增</el-button>
        </el-col>
      </el-row>
      <el-table :data="data" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="BookName" label="名称" width="180"/>
        <el-table-column prop="Author" label="作者" width="180"/>
        <el-table-column prop="TypeName" label="类别" width="160"/>
        <el-table-column prop="Remarks" label="备注" width="180"/>
        <el-table-column label="操作" width="135">
          <template #default="scope">
            <el-button size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button size="small" @click="dele(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <template #empty>
          <span>无数据</span>
        </template>
      </el-table>
      <addt :isShow="isShow" :info="info" @closeAdd="closeAdd" :inway="inway" :title="title"></addt>
    </div>
</template>

<style scoped>
.main{
  width: 60%;
  margin: 100px auto;
}


</style>